<template>
  <el-tag
    :class="['status_base', 'status_base_' + size, getClassFn()]"
    :style="getStyleFn()"
    :size="size"
    :type="getType()"
    :disable-transitions="true"
    v-bind="attrs"
    @click="itemEvent"
  >
    <i v-if="iconClass" :class="iconClass" :style="getStyleFn('color')"></i>
    <b v-else :style="getStyleFn('bgColor')"></b>
    <text-base :style="getStyleFn('color')" v-bind="{ ...attrs, row: row }"></text-base>
  </el-tag>
</template>
<script setup>
import TextBase from '../text/TextBase.vue';
const props = defineProps({
  row: {
    // form数据,或者table的行数据
    type: Object,
    default: () => ({}),
  },
  options: {
    // 设置背景色、文字
    type: Object,
    default: () => ({}),
  },
  codeName: {
    // 取row中的哪个字段比较
    type: String,
    default: 'status',
  },
  size: {
    type: String,
    default: 'small',
  },
  iconClass: {
    // 是否展示icon
    type: String,
    default: '',
  },
});

const attrs = useAttrs();

const emits = defineEmits(['itemEvent']);

function getClassFn() {
  let val = props.row[props.codeName];
  let obj = props.options;
  let type = obj[val]?.type || '';
  return type ? 'status_base_' + type : '';
}

function getType() {
  let val = props.row[props.codeName];
  let obj = props.options;
  let type = obj[val]?.type || '';
  return type;
}

function getStyleFn(type) {
  let val = props.row[props.codeName];
  let obj = props.options;
  let style = obj[val]?.style || {};
  if (type === 'color') {
    return style.color ? { color: style.color } : '';
  } else if (type === 'bgColor') {
    return style.color ? { backgroundColor: style.color } : '';
  }
  style.borderColor = style.color;
  return style || '';
}

function itemEvent() {
  emits('itemEvent', {
    row: props.row,
  });
}
</script>

<style lang="scss" scoped>
.status_base {
  padding: 0 8px;
  width: 100%;
  justify-content: flex-start;
  b {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 4px;
    position: relative;
    top: -1px;
    background-color: var(--el-color-primary);
  }
  i {
    margin-right: 2px;
    position: relative;
    top: 1px;
    font-size: 14px;
  }
}
.status_base_small {
  height: 24px;
  line-height: 24px;
  top: -1px;
  border-radius: 24px;
}

.status_base_info b {
  background-color: var(--el-color-info);
}
.status_base_danger b {
  background-color: var(--el-color-danger);
}
.status_base_warning b {
  background-color: var(--el-color-warning);
}
.status_base_success b {
  background-color: var(--el-color-success);
}
</style>
